<template>
  <transition name="slide">
    <musiclist :title="title" :bgImage="bgImage" :songs="hostList"></musiclist>
  </transition>
</template>
<script>
import musiclist from "@/components/music-list/music-list";
import { mapGetters } from "vuex";
import { getHotMusicList } from "../../api/recommend";
import { ERR_OK } from "@/api/config";
import { createHotSong } from "@/common/js/SongObject";
import { getMusicVkey } from "@/api/Singer";
export default {
  data() {
    return {
      hostList: [] //热门歌单
    };
  },
  components: {
    musiclist
  },
  computed: {
    title() {
      return this.disc.dissname;
    },
    bgImage() {
      return this.disc.imgurl;
    },
    ...mapGetters(["disc"])
  },
  created() {
    this.getHostMuic(this.disc.dissid);
  },
  methods: {
    //获取歌单详情的数据请求
    getHostMuic(dissid) {
        if(!dissid){
            this.$router.push('/recommend')
        }
      getHotMusicList(dissid).then(res => {
        if (res.code === ERR_OK) {
          this.hostList = this._nomolrizeHostMusic(res.cdlist[0].songlist);
        }
      });
    },
    //处理歌单数据
    _nomolrizeHostMusic(list) {
      let ret = [];
      list.forEach(item => {
        let playUrl = "";
        getMusicVkey(item.mid).then(res => {
          let Data = res.req_0;
          if (Data.code === ERR_OK) {
            playUrl = Data.data.midurlinfo[0].purl;
            if (item.id && item.album.id) {
              const newSong = createHotSong(item, playUrl);
              ret.push(newSong);
            }
          }
        });
      });
      return ret;
    }
  }
};
</script>
<style lang="stylus">
@import '../../common/stylus/variable.styl';

.singer_detail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: $color-background;
}

// 动画
.slide-enter-active, .slide-leave-active {
  transition: all 0.3s;
}

.slide-enter, .slide-leave-to {
  transform: translate3d(100%, 0, 0);
}
</style>
